@import 'common';

@boder-color: #ddd;

body {
    font-family: PingFangSC-Light,helvetica,'Heiti SC';
}

.personal-container {
    .container-header {
        display: flex;
        align-items: center;
        padding: .6rem .2rem;
        background: url(../img/personal/personal-bg.jpg);
        img {
            flex: 1.2rem;
            border-radius: 50%;
        }
        
        .header-text {
            width: 80%;
            padding-left: .2rem;
            overflow: hidden;
            strong {
                display: block;
                font-size: .26rem;
                font-weight: 600;
                color: @font-light-most-color;
            }
            span {
                font-size: .2rem;
                line-height: .3rem;
                color: @font-light-color;
            }
        }
    }
    
    .container-content {
        background: @inner-background;
        .content-part {
            display: flex;
            flex-wrap: wrap;
            a {
                width: 33%;
                padding: .3rem 0;
                text-align: center;
                font-size: .2rem;
                color: @font-medium-color;
                border-right: .01rem solid @boder-color;
                border-bottom: .01rem solid @boder-color;
                span {
                    display: block;
                }
            }
            
            .noborder-right {
                border-right: 0;
            }
            
            .noborder-bottom {
                border-bottom: 0;
            }
            
        }
    }
    
    .container-footer {
        .footer-button {
            display: block;
            margin-top: .3rem;
            padding: .3rem;
            text-align: center;
            font-size: .2rem;
            color: @font-medium-color;
            background: @inner-background;
        }
    }
    
} 